<template>
  <div class="search_box">
    <div class="search_title">
      <i class="iconfont icon-zuojiantou" @click="$router.go(-1)"></i>
      <input
        type="text"
        placeholder="搜索商品/店铺/种类"
        v-model="value"
        @keyup="getSearch"
      />
      <span @click="getSearch">搜索</span>
      <i class="iconfont icon-sousuo"></i>
    </div>

    <!-- 热门搜索 -->
    <div class="search_histroy" v-if=" this.value =='' &&  goodsList == ''">
      <h4>
        <img src="http://touch.m.dangdang.com/images/fire_icon.png" alt="" />
        热门搜索
      </h4>
      <div class="hot_box">
        <ul>
          <li v-for="(item, index) in hotCont" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>

    <!-- 搜索列表 -->
    <searchLists :goodsList="goodsList" v-if="goodsList !=0"/>
  </div>
</template>

<script>
import Vue from "vue";
import searchLists from "../components/searchPage/searchLists.vue";
export default {
  components: {
    searchLists,
  },
  data() {
    return {
      value: "",
      hotCont: [
        "三体",
        "溢出",
        "铅笔童装",
        "小企鹅去旅行",
        "穿过地平线",
        "秒杀9.9元抢",
      ],
      goodsList:[]
    };
  },
  methods: {
    getSearch() {
      let val = this.value;
      var _this = this;
      console.log(this.value);
      if (this.value) {
        window.setTimeout(function () {
          Vue.axios
            .get(
              'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
              {
                  params:{
                      query:val
                  }
              }
            )
            .then((response) => {
              console.log(response.data.message.goods);
              _this.goodsList = response.data.message.goods
            });
        }, 1000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search_box {
  width: 100%;
}
.search_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  position: relative;
  background-color: white;
  input {
    flex: 1;
    display: inline-block;
    height: 30px;
    background-color: #e8ecf0;
    border-radius: 15px;
    font-size: 15px;
    color: #b8c0c5;
    // text-indent: 30px;
    padding-left: 30px;
  }
  .iconfont {
    flex: 0 0 45px;
    font-size: 20px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #9d9d9d;
  }
  span {
    display: inline-block;
    text-align: center;
    flex: 0 0 45px;
    font-size: 15px;
    line-height: 45px;
    color: #9d9d9d;
  }
  .icon-sousuo {
    left: 53px;
    font-size: 16px;
    position: absolute;
  }
}
.search_histroy {
  padding: 12px;
  box-sizing: border-box;
  img {
    width: 20px;
    height: 20px;
  }
  h4 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .hot_box {
    ul {
      overflow: hidden;
      li {
        font-size: 14px;
        float: left;
        background-color: white;
        border-radius: 5px;
        margin: 0px 5px 5px 0px;
        padding: 4px 10px;
      }
    }
  }
}
</style>